<template>
  <ScrollContainer class="pr-4" v-loading="loading" :loading-tip="t('common.loadingText')">
    <div>
      <div class="flex items-center mb-2">
        <div class="mr-2 w-33px">表单:</div>
        <div
          ><Select
            :options="formDataOptions"
            style="width: 160px"
            placeholder="请选择"
            v-model:value="currentCode"
            @change="handleChangeForm"
        /></div>
      </div>
      <div class="flex items-center mb-2">
        <div class="mr-2 w-33px">编码:</div>
        <div>{{ formCode }}</div>
      </div>
      <div class="flex items-center mb-2">
        <div class="mr-2 w-33px">SQL:</div>
        <div class="flex">
          <div class="mr-2 cursor-pointer" @click="handleBtn('sqlLoad')">选择</div>
          <div class="mr-2 cursor-pointer" @click="handleBtn('sqlInsert')">增加</div>
          <div class="mr-2 cursor-pointer" @click="handleBtn('sqlDelete')">删除</div>
          <div class="mr-2 cursor-pointer" @click="handleBtn('sqlUpdate')">修改</div>
        </div>
      </div>
      <Divider :dashed="true">字段</Divider>
    </div>
    <ScrollContainer>
      <div class="h-43vh">
        <div
          v-for="item in fieldsDataOptions"
          :key="item.name"
          class="cursor-pointer hover:underline"
          @click="handleFieldsItem(item)"
        >
          {{ item.title }}({{ item.name }})
        </div>
      </div>
    </ScrollContainer>
  </ScrollContainer>
</template>

<script lang="ts" setup>
  import { ref, unref, onMounted, reactive } from 'vue';
  import { ScrollContainer } from '/@/components/Container';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Select, Divider } from 'ant-design-vue';
  import { getFormList, getFormFields } from '/@/api/process/process';
  import { isArray } from '/@/utils/is';
  const { t } = useI18n();
  import { getIdeGetSqlsByFormCode } from '/@/api/flowManage/flowManage';
  const emits = defineEmits(['selField']);
  const props = defineProps({
    formCode: {
      type: String,
      default: '',
    },
  });
  interface FormDataOptions {
    code: string;
    name: string;
    label?: string;
    value?: string;
  }
  const loading = ref(false);
  const formDataOptions = ref<FormDataOptions[]>([]);
  const fieldsDataOptions = ref([]);
  const currentCode = ref('');

  // const handleResetFields = () => {
  //   resetFields();
  // };
  //获取表单
  function fetch() {
    formDataOptions.value = [];
    loading.value = true;
    getFormList()
      .then((res) => {
        formDataOptions.value = res || [];
        if (isArray(formDataOptions.value) && formDataOptions.value.length) {
          formDataOptions.value.forEach((item: FormDataOptions) => {
            item.label = item.name;
            item.value = item.code;
          });
          currentCode.value = props.formCode || formDataOptions.value[0].code; //formDataOptions.value[0].code;
          handleChangeForm();
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
  //表单change
  const handleChangeForm = () => {
    getFieldsData();
    getIdeGetSqlsByFormCodeData();
  };

  //取表单选项卡中的SQL语句及脚本库
  let sqlsByFormCode = reactive({});
  const getIdeGetSqlsByFormCodeData = async () => {
    if (!unref(currentCode)) return;
    sqlsByFormCode = await getIdeGetSqlsByFormCode({ formCode: unref(currentCode) });
  };
  //初始化
  onMounted(() => {
    fetch();
  });
  //获取表单对应字段
  const getFieldsData = async () => {
    try {
      const params = {
        formCode: unref(currentCode),
      };
      loading.value = true;
      fieldsDataOptions.value = [];
      fieldsDataOptions.value = (await getFormFields(params)) || [];
      loading.value = false;
    } catch (err) {
      console.log(err);
      loading.value = false;
    }
  };

  //单击字段
  const handleFieldsItem = ({ name }) => {
    emits('selField', name);
  };

  //SQL
  const handleBtn = (type) => {
    emits('selField', sqlsByFormCode[type]);
  };
</script>
